<template>
  <div>
    <div class="article-list">
       <!-- 
        loading 和 finished 两个变量控制加载状态，
        当组件滚动到底部时，会触发 load 事件并将 
        loading 设置成 true。此时可以发起异步操作并更新数据，
        数据更新完毕后，将 loading 设置成 false 即可。
        若数据已全部加载完毕，则直接将 finished 设置成 true 即可
        -->
        <van-pull-refresh v-model="isreLoading" 
            :success-text="refSuccessText"
            :success-duration="1000"
            @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
            >
            <!-- 文章列表项 -->
            <ArticleItem v-for="(item,index) in list" 
                :key="index" 
                :title="item.title"
                :article = item
                />
            </van-list>
        </van-pull-refresh>
        
    </div>
  </div>
</template>

<script>
import {getArticles} from '@/api/article'
import ArticleItem from '@/components/article-item/article-item.vue'
export default {
    props:{
        channels:{
            type: Object,
            required: true
        }
    },
    components:{
        ArticleItem
    },
    name:'ArticleList',
    data() {
        return {
        list: [], //存储列表数据的数组
        loading: false, //控制加载中loading状态
        finished: false, //控制数据加载结束的状态
        timestamp: null, //请求获取下一页时间戳
        error: false, //控制列表加载失败的提示状态
        isreLoading: false, //控制下拉刷新的loading状态
        refSuccessText:'刷新成功', //下拉更新的数据条数
        }
    },
    methods: {
    //初始化或滚动到底部的时候触发调用onLoad
       async onLoad() {
        try{
            //1异步更新数据
            const {data} = await getArticles({
                channel_id:this.channels.id, //频道ID
                /*
                    timestamp简单理解就是请求数据的页码
                    请求第1页数据：当前最新时间戳
                    用户请求之后数据的时间戳会在当前请求结果中返回
                */
                timestamp:Date.now() || this.timestamp //时间戳

            })
            
            // /*模拟失败*/
            // if(Math.random()*1 > 0.5){
            //     JSON.parse('as')
            // }

            //2把请求结果数据放到list数组中
            const {results} = data.data
            //数组的展开操作
            this.list.push(...results)

            //3本次数据加载结束之后要把加载状态设置为结束
                // loading关闭后才能下一次继续触发加载更多
            this.loading = false    
            //4判断是否加载完成  
            if(results.length){
                //更新获取下一页数据的时间戳
                this.timestamp = data.data.pre_timestamp
            }else{
                //数据全部加载完成，将finished设置为true关闭加载更多的触发函数    
                this.finished = true
            }
        }catch(err){
            //展示错误提示状态
           this.error = true
           //请求失败了 loading页需要关闭
           this.loading = false

        }
        
        },
        //当下拉刷新调用该函数
       async onRefresh(){
            try{
                //请求获取数据
                const {data} = await getArticles({
                    channel_id:this.channels.id,
                    timestamp:Date.now() || this.timestamp //下拉刷新传最新时间戳
                })
                //  /*模拟失败*/
                // if(Math.random()*1 > 0.5){
                //     JSON.parse('as')
                // }
                //将数据追加到列表顶部
                const {results} = data.data
                this.list.unshift(...results)
                //关闭下拉刷新的loading状态
                this.isreLoading = false
                //更新下拉刷新成功提示文本
                this.refSuccessText = `刷新成功，已更新${results.length}条数据`
            }catch(err){
                this.refSuccessText = `刷新失败`
                this.isreLoading = false
            }
            
        }
    },

}
</script>

<style lang="less" scoped>
    .article-list{
        height: 79vh;
        overflow-y: auto;
    }
</style>